iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1
自我挑戰組

介面設計流程與開發2系列 第 5

切版起手式,以Daily UI 01-Sign up為例 1/2

  • 分享至 

  • xImage
  •  

前言
前三篇介紹了以 Daily UI-Sign Up為例設計的畫面相關細節,此時前端工程師就會從設計師手中拿到設計稿(如 Zeplin)等資訊,將視覺畫面進行「切版」的動作,「切版」簡單來說就是把視覺畫面用程式碼轉換成網頁結構,在這轉換的過程有許多細節都是需要不斷與專案管理者(PM)、設計師溝通,才能產出多方皆滿意的成品,今天將介紹切版所需具備的基本知識及開發工具,和大家分享我學習切版的小心得。


開發工具

  • 編輯器:Visual Studio Code
    Visual Studio Code 是由微軟開發的程式編輯器,是提供給網頁開發者使用的輕量級編輯器,且近期不斷調整,已成為非常好用的開發工具,安裝簡單、容易上手,除了可彈性使用擴充功能新增自己習慣的工具加速開發,更有版本控管功能方便專案管理,是功能很齊全的一款編輯器,除了 Visual Studio Code以外,也有其他像是Sublime TextAtom等編輯器適合網頁開發者使用,有興趣的朋友也可以嘗試看看,選擇適合自己開發的編輯器來使用。
    https://ithelp.ithome.com.tw/upload/images/20171224/20103234rFsV2gse1o.png
    ▲ Visual Studio Code 介面

切版基本語言

  • HTML:是網頁的骨架,所有網頁上所需呈現的內容,都須透過HTML編寫而成。
    以此案例來說,畫面上的內容包含:Hello、Nice to meet you、username輸入框、email輸入框、passwords輸入框及下方的兩個按鈕,HTML寫法如下:

    Hello 標題:<h1>Hello</h1>
    Nice to meet you:<span>Nice to meet you!</span>
    username輸入框:<input type="text" placeholder="username">
    email輸入框:<input type="text" placeholder="email">
    passwords輸入框:<input type="password" placeholder="passwords">
    註冊按鈕:<button type="button">CREATE ACCOUNT</button>
    Facebook登入按鈕:<button type="button">Login with Facebook</button>

  • CSS:CSS 用來美化網頁,透過 CSS 將畫面中的內容調整成設計稿上的位置及色彩。
    此案例來說,背景的漸層色、文字大小調整、文字顏色、輸入框邊線粗細及顏色、按鈕顏色等變化都需藉由CSS來調整,以做到畫面設計的樣子,這邊簡單舉幾個例子如下:

    Hello 標題大小:font-size: 100px;
    註冊按鈕顏色:background-color: #ca0065;
    背景漸層色:background: linear-gradient(135deg, #fff100 15%,#ff0080 100%);

    ※ 此部分在下一篇會有更詳細的介紹。

  • JavaScript:JavaScript 是讓網頁活起來的重要角色,若用一張臉來比喻,HTML 是五官、CSS 是化妝品、而JavaScript就是眨眼或微笑等動作,此案例中的密碼輸入框眼睛開合功能就需透過JavaScript達成。

https://ithelp.ithome.com.tw/upload/images/20171224/20103234ufqslWwOZe.png
▲ 註冊畫面設計圖


Bootstrap4
Bootstrap是用於開發響應式網頁的開源工具包,在今年釋出 Bootstrap4 beta.2版本,為了跟上時代的腳步,學習了「六角學院」的 Bootstrap4 線上課程後,決定套用在這次的鐵人賽切版作為練習,詳細作法會在下一篇介紹。


以上簡單介紹切版的先備知識,明天將會以程式碼說明如何透過 Bootstrap4 進行切版,並且用SCSS設定客製化的主題色彩等相關細節,感謝耐心閱讀!歡迎留言討論指教~

-By Anny


上一篇
新手UI起手式,以Daily UI 01-Sign up為例 3/3 - 其他搭配軟體
下一篇
切版起手式,以Daily UI 01-Sign up為例 2/2
系列文
介面設計流程與開發230
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言